<template>
  <div class="herolist">
    <ul>
      <router-link tag="li" :to="'/heroinfo/'+item.ename" v-for="item of herolistname" :key="item.ename">
        <div class="heroImg">
          <img :src="'https://game.gtimg.cn/images/yxzj/img201606/heroimg/'+item.ename+'/'+item.ename+'.jpg'"></div>
        <div class="heroName">
          <p>{{item.cname}}</p>
          <p>{{item.title}}</p>
        </div>
      </router-link>
    </ul>
  </div>
</template>

<script>

  export default {
    name: 'HeroList',
    data () {
      return {
        herolistname: []
      }
    },
    created () {
      this.getHeroList()
    },
    methods: {
      getHeroList () {
        this.$http('../../../static/json/herolist.json').then(this.getHerListSucc)
      },
      getHerListSucc (res) {
        const data = res.data
        this.herolistname = data
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .herolist ul {
    text-align: center;
  }
  .herolist ul li{
    width:22.5%;
    height: 130px;
    box-shadow:1px 1px 3px #7e8c8d ;
    margin-top: 10px;
    padding: 2px;
    margin-left: 1%;
    float: left;
  }
  .heroImg img {
    width:100%;
    height:100px;
  }
  .heroName {
    margin-top: -12px;
    text-align: center;
    font-size: 12px;
  }
  .heroName p {
    margin-top:4px;
  }
  .heroName p:last-child {
    margin-top: -6px;
    color: #7e8c8d;
    font-size: 10px;
	color:#268fb5;
  }
</style>
